<template>
	<view class="main">
		<u-navbar title="修改昵称" :autoBack="true" :placeholder="true" @rightClick="save" rightText="保存">
		</u-navbar>
		<view class="edit">
			 <u--input maxlength="12" v-model="userInfo.nickName" placeholder="请输入昵称" border="bottom" @input="changeChildName" clearable></u--input>
		</view>
		<span class="txt">限2-12个中文,英文或数字。也可以试试推荐昵称:</span>
		<view class="box">
			<view class="sug" v-for="item,index in childName" :key="index" @click="upValue(item)">
				<span>{{item}}</span>
			</view>			
		</view>
		<view class="botbar">
			<view class="top">
				为什么要设置你，哼?
			</view>
			<view class="bigBox">
				<view class="left" style="width: 70%;">
					<view class="item">
						<view class="icon">
							<i class="iconfont icon-iconfontzhizuobiaozhun023121"></i>
						</view>
						<view class="text">
							<span class="title">保护隐私</span>
							<span class="tent"  style="color: #ccc;">昵称外显,保护您的隐私</span>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<i class="iconfont icon-iconfontzhizuobiaozhun023121"></i>
						</view>
						<view class="text">
							<span class="title">个性彰显</span>
							<span class="tent"  style="color: #ccc;">表达你的态度，换掉无聊字符</span>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<i class="iconfont icon-iconfontzhizuobiaozhun023121"></i>
						</view>
						<view class="text">
							<span class="title">随时修改</span>
							<span class="tent" style="color: #ccc;">你的昵称你做主，想改随时改</span>
						</view>
					</view>
				</view>
				<view class="right" style="width: 30%;">
					<image style="width: 100%;" src="http://182.61.31.180:5000/images/1654478384573_现代言情小说.jpg"></image>
				</view>
				</view>
				
			</view>
		</view>
	
</template>

<script>
	
		import {mapGetters} from 'vuex'
		export default{
			data(){
				return{
					userInfo1:{
						nickName:"",						
					},
					childName:[],
					chars:['1','2','3','4','5','6','7','8','9','0','+','-','*','/','~','@','#','$','%','&']
				}
			},
			computed:{
				...mapGetters(['userInfo'])
			},
			methods:{
				save(){			
					console.log(this.userInfo.nickName)
					this.$store.dispatch('updateNickname',this.userInfo.nickName)
					this.$Router.back()
				},
				upValue(value){
					console.log(value)
					this.userInfo.nickName=value
				},
				getRndInteger (max) {
				  return Math.floor(Math.random() * max );
				},
				changeChildName(value){
					
					let len=3;
					if(value.length==12)
					{this.childName=[];
						return;} 
					else if(value.length==11)
						len=1;
					else if(value.length==10)
						len=2;					
					this.childName=[]
					let charLength=this.chars.length
					let indexs=[]
					console.log(len)
					for(let j=0;j<6;j++){
						let temp='';
						for(let i=0;i<len;i++)
							temp+=this.chars[this.getRndInteger(charLength)]
						temp=value+temp
						this.childName.push(temp)
					}
					if(!this.userInfo.nickName)
					this.childName=[]
				}
			},
		}
</script>

<style lang="scss" scoped>
	.main{
		height: 100%;
	.edit{
			display: flex;
			flex-direction: column;
			margin:1.5rem 1rem 1rem 1rem;
			background-color: white;
			padding: 0.5rem 0.5rem;
					    
	}
	.txt{
		margin-left: 1rem;
		color: #ccc;
		
	}
	.box{
		margin:1rem 1rem 1rem 1rem;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		flex-wrap: wrap;
			.sug{
				display: flex;
				flex-wrap: nowrap;
				margin-top:0.5rem;
				text-align: center;
				display: inline-block;
				padding:0.5rem 1rem;
			background-color: white;
			border-radius: 10px;
			font-size: 1.2rem;
			color:#ccc;
			}
	}
	.botbar{
		
		width: 100%;
		background-color: white;
		border-radius: 2rem;
		height:25rem;
		position:fixed;
		bottom: 0;
		.top{
			margin-top: 1rem;
			font-size: 1.5rem;
			display: flex;
			justify-content: center;
		}
		.bigBox{
			display: flex;
			width: 100%;
			.right{
				margin-top: 2rem;
			}
			.left{
				width: 80%;
				.item{
					padding-top:2rem;
					display: flex;
					flex-direction: row;
					margin-left:2.5rem;
					.text{
						// background: red;
					padding-left:1rem;
					.title{
						display: block;
						padding-bottom: 0.3rem;
						
					}	
					
					}
					
					.icon{
						display: flex;
						justify-content: center;
						align-items: center;
						 
						color: red;
						.iconfont{
							font-size: 2.5rem;
						}
					}
				}
			}
			// .right{
			// 	width: 7rem;
			// }
		}
	}
	}
</style>
